<template>
  <div class="debug-tools">
    <t-drawer
      v-model:visible="visibleTools"
      :close-on-overlay-click="false"
      :footer="false"
      :header="false"
      :on-overlay-click="() => (visibleTools = false)"
      :show-overlay="false"
      class="debug-tools__drawer"
      size="49%"
      @cancel="visibleTools = false"
    >
      <div class="debug-tools__close">
        <t-button theme="default" shape="square" variant="text" @click="() => (visibleTools = false)">
          <steve-icon name="close" />
        </t-button>
      </div>
      <t-tabs v-model="debugTabsValue" theme="card" drag-sort>
        <t-tab-panel value="elements" :label="$t('pages.source.debug.elements')" :destroy-on-hide="false">
          <div class="scrollable-container">
            <steve-ace-editor :value="data.responseHtml" :height="aceEditorHeight" :readonly="true" />
          </div>
        </t-tab-panel>
        <t-tab-panel value="parsing" :label="$t('pages.source.debug.parsing')" :destroy-on-hide="false">
          <div class="scrollable-container">
            <steve-ace-editor :value="responseParsing" :height="aceEditorHeight" :readonly="true" />
          </div>
        </t-tab-panel>
        <t-tab-panel value="headers" :label="$t('pages.source.debug.headers')" :destroy-on-hide="false">
          <div class="scrollable-container">
            <t-collapse default-expand-all borderless>
              <t-collapse-panel value="0" :header="`Request Headers (${requestHeadersCount})`">
                <div class="headers-list">
                  <div v-for="(value, key) in data.requestHeader" :key="key" class="header-item">
                    <div class="header-item__title">{{ key }}</div>
                    <div class="header-item__content">
                      <span v-if="value">{{ value }}</span>
                      <t-tag v-else>Empty</t-tag>
                    </div>
                  </div>
                </div>
              </t-collapse-panel>

              <t-collapse-panel :header="`Response Headers (${responseHeadersCount})`" value="1">
                <div class="headers-list">
                  <div v-for="(value, key) in data.responseHeader" :key="key" class="header-item">
                    <div class="header-item__title">{{ key }}</div>
                    <div class="header-item__content">
                      <div v-if="value">{{ value }}</div>
                      <t-tag v-else>Empty</t-tag>
                    </div>
                  </div>
                </div>
              </t-collapse-panel>
            </t-collapse>
          </div>
        </t-tab-panel>
        <t-tab-panel value="put" label="PUT" :destroy-on-hide="false">
          <div class="scrollable-container">
            <steve-ace-editor :value="putDiy" :height="aceEditorHeight" :readonly="true" />
          </div>
        </t-tab-panel>
        <t-tab-panel value="data" label="Api Data" :destroy-on-hide="false">
          <div class="scrollable-container">
            <steve-ace-editor :value="apiData" :height="aceEditorHeight" :readonly="true" />
          </div>
        </t-tab-panel>
      </t-tabs>
    </t-drawer>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, toRefs, watch } from 'vue';

import steveIcon from '@/components/steveIcon/index.vue';
import SteveAceEditor from '@/components/steveAceEditor/index.vue';
import { formatJSON } from '@/utils/common';

const props = defineProps({
  // 是否可见
  visible: {
    type: Boolean,
    default: false,
  },
  // 数据
  data: {
    type: Object,
    default: null,
  },
});

// 事件
const emit = defineEmits(['update:visible']);
const debugTabsValue = ref('elements');

// 可视tools
const visibleTools = ref(false);
const { visible, data } = toRefs(props);
watch(visible, (v) => {
  visibleTools.value = v;
});

const apiData = ref('');
const responseParsing = ref('');
const putDiy = ref('');
const requestHeadersCount = ref(0);
const responseHeadersCount = ref(0);
watch(data, (v) => {
  apiData.value = formatJSON(JSON.stringify(v));

  if (v.responseParsing) {
    responseParsing.value = formatJSON(JSON.stringify(v.responseParsing));
  }
  if (v.putDiy) {
    putDiy.value = formatJSON(JSON.stringify(v.putDiy));
  }

  requestHeadersCount.value = Object.keys(v.requestHeader).length;
  responseHeadersCount.value = Object.keys(v.responseHeader).length;
});

// 通知 visible
watch(visibleTools, (v) => {
  emit('update:visible', v);
});

// 计算编辑器高度
const computedStyle = getComputedStyle(document.documentElement);
const sizeXxl = computedStyle.getPropertyValue('--td-comp-size-xxl');
const aceEditorHeight = computed(() => {
  const h = window.innerHeight;
  return h - parseFloat(sizeXxl);
});
</script>

<style lang="less" scoped>
:deep(.t-drawer__body) {
  padding: 0;
}

.debug-tools {
  position: relative;
  &__close {
    position: absolute;
    z-index: 999;
    top: var(--td-comp-margin-s);
    right: var(--td-comp-margin-s);
  }

  .headers-list {
    .header-item {
      margin-bottom: var(--td-comp-margin-l);

      &__title {
        font-weight: bold;
        color: var(--td-text-color-primary);
      }

      &__content {
        font-size: var(--td-font-body-small);
        margin-top: var(--td-comp-margin-s);
        word-break: break-all;
      }
    }
  }
}
</style>
